<template>
    
    <view class="pd-20 goods-list">
    
    
        <view class=" pd-20 row" v-for="(order, index) in orders" :key="order.tradeId">
            <!-- 公司列表 -->
            <view class="top-firm-info">
                <view class="firm-box">
                    <text class="firm-name">订单ID: {{order.tradeId}}</text>
                    <text class="refundButton" v-if="order.status=='已履约'" @click="previewRefundOrder(order)">我要退款</text>
                    
                </view>
                
            </view>
    
            <!-- 商品列表 -->
            <view class="firm-goods-list" v-for="(subOrder, i) in order.subOrders" :key="subOrder.subTradeId">
                <image class="goods-img" :src="subOrder.image"></image>
                <view class="right-goods-box">
                    <view class="goods-name">商品:    {{subOrder.title}}</view>
                    <view class="goods-name">子单ID:  {{subOrder.subTradeId}}</view>
                    <view class="goods-name">生效期:   {{subOrder.effectiveTime}}</view>
                    <view class="goods-name">购买时间:  {{subOrder.buyTime}}</view>
                    <view class="goods-name">状态:  {{subOrder.status}}</view>
                    
                    
                    <view class=" goods-spec">
                        <text class="text">{{subOrder.attr_val}}</text>
                    </view>
                    <view class="price-number-box">
                        <view class="red-price">￥{{subOrder.payPrice}}</view>
            
                    </view>
                    <view class="number-box">
                        <text class="number-num">购买数量 {{subOrder.buyCount}} </text>
                    </view>
                
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    
    import axios from 'axios'
export default {
    data() {
        return {
            orders : [
                {
                    "title": "订单1",
                    "tradeId": "32984343455423523",
                    "buyTime": "2025.3.1 12:01:30",
                    "subOrders": [
                        {
                            "title": "电商会员月卡",
                            "subTradeId": "28983494530942098434",
                            "effectiveTime": "2024.3.1 - 2025.4.1",
                            "payPrice": "10.0",
                            "buyCount": 1,
                            "buyTime": "2025.3.1 12:01:30",
                            "image": "https://img0.baidu.com/it/u=973101599,73999428&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"
                        },
                        {
                            "title": "电商会员月卡",
                            "subTradeId": "453598349942098434",
                            "effectiveTime": "2024.3.1 - 2025.4.1",
                            "payPrice": "10.0",
                            "buyCount": 1,
                            "buyTime": "2025.3.1 12:01:30",
                            "image": "https://img0.baidu.com/it/u=973101599,73999428&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400"
                        }
                    ]
                }
            ],
        }
    },
    onShow() {
         this.loadOrders()
    },
    methods: {
        loadOrders () {
            let req = {}
            const config = {
              headers:{
                  'user_id': '12345678',
                  'Content-Type': 'application/json'
              }
            };
            this.doLoad(req, config);
        },
        doLoad(req, config){
                    axios.defaults.crossDomain = true
                    axios.defaults.headers.common['Access-Control-Allow-Origin'] = process.env.VUE_APP_Access_Control_Allow_Origin;
                    
                    axios.post('http://localhost:9977/memberclub/aftersale/records', req, config)
                          .then(response => {
                                this.orders = response.data.data
                                console.log(this.orders)
                          })
                          .catch(function (error) { // 请求失败处理
                            console.log(error);
                          });
        },
        refundOrder(order, result){
            let req = {}
            req.bizType = order.bizType;
            req.tradeId = order.tradeId;
            req.source = 1;
            req.previewDigest = result.digests
            req.digestVersion = result.digestVersion
            const config = {
              headers:{
                  'user_id': '12345678',
                  'Content-Type': 'application/json'
              }
            };
            axios.defaults.crossDomain = true
            axios.defaults.headers.common['Access-Control-Allow-Origin'] = process.env.VUE_APP_Access_Control_Allow_Origin;
            axios.post('http://localhost:9977/memberclub/aftersale/apply', req, config)
                  .then(response => {
                        let refundResult = response.data.data;
                        if(refundResult.success && refundResult.unableCode==0){
                        
                            this.$message({
                                type: 'success',
                                message: '退款成功',
                            });
                            this.loadOrders()
                        } else
                        {
                            this.$message({
                                type: 'error',
                                message: '退款失败，'+refundResult.unableTip,
                            });
                        }
                  })
                  .catch(function (error) { // 请求失败处理
                    console.log(error);
                  });
        },
        
        previewRefundOrder(order) {
            let req = {}
            req.bizType = order.bizType;
            req.tradeId = order.tradeId;
            req.source = 1;
            const config = {
              headers:{
                  'user_id': '12345678',
                  'Content-Type': 'application/json'
              }
            };
            
            axios.defaults.crossDomain = true
            axios.defaults.headers.common['Access-Control-Allow-Origin'] = process.env.VUE_APP_Access_Control_Allow_Origin;
            
            axios.post('http://localhost:9977/memberclub/aftersale/preview', req, config)
                  .then(response => {
                        let result = response.data.data
                        this.$confirm
                        console.log(result)
                        
                        if (!(result.success&& result.unableCode==0)){
                            this.$message({
                                type: 'error',
                                message: '不可退款，'+result.unableTip,
                            });
                            return;   
                        }
                        
                        let refundWay = result.refundWay == 'ORDER_BACKSTRACK' ? "原路退款": '其他赔付'
                        let refundType = result.refundType = 'ALL_REFUND' ? "全部退": "部分退"
                        
                        
                        this.$confirm('退款结果预览，是否继续退款 <br/>'+
                        '<view class="goods-name">退款金额:  ' + result.recommendRefundPriceYuan +' 元</view><br/>'+
                        '<view class="goods-name">退款方式:  ' + refundWay +'</view><br/>'+
                        '<view class="goods-name">退款类型:  '+refundType +'</view><br/>'+
                        ''
                        ,'提示', {
                            dangerouslyUseHTMLString: true,
                                  confirmButtonText: '确定',
                                  cancelButtonText: '取消',
                                  type: 'warning'
                                }).then(() => {
                                    this.refundOrder(order, result)
                                }).catch(() => {
                                  this.$message({
                                    type: 'info',
                                    message: '已取消退款'
                                  });
                                });
                        
                        
                  })
                  .catch(function (error) { // 请求失败处理
                    console.log(error);
                  });
        }
        
    }
    
}

</script>

<style lang="less" scoped>
	page {
		padding-bottom: 110rpx;
	}

	/deep/checkbox .wx-checkbox-input,
	/deep/uni-checkbox .uni-checkbox-input {
		border-radius: 50% !important;
		height: 32rpx;
		width: 32rpx;
		margin-top: -8rpx;
		vertical-align: middle;
	}

	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		image {
			width: 240upx;
			height: 160upx;
			margin-bottom: 30upx;
		}

		.empty-tips {
			display: flex;
			font-size: 28rpx;
			color: #D2359C;

			.navigator {
				color: #FF0000;
				margin-left: 16upx;
			}
		}
	}

	.red-price {
		color: #F0250F;
	}

	.pd-20 {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.goods-list {
		width: 100%;

		font-size: 28rpx;

		.row {
			box-shadow: 0rpx 5rpx 20rpx rgba(#000, .1);
			margin-bottom: 20rpx;

			.top-firm-info {
				display: flex;
				align-items: center;
				height: 60rpx;
				line-height: 60rpx;

				.checkbox {}

				.firm-box {
					margin-left: 10rpx;

					.firm-name {
						font-weight: 600;
					}
				}
			}

			.firm-goods-list {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 20rpx 0;
				padding-left: 10rpx;
				border-bottom: 1px #DADADA dashed;
				position: relative;

				&:last-child {
					border-bottom: none;
				}

				.deleteData {
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					font-size: 32rpx;
					padding: 20rpx;
					padding-top: 10rpx;
					color: #ff0000;
					box-sizing: border-box;
				}

				.goods-img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}

				.right-goods-box {
					flex: 1;
					margin-left: 20rpx;

					.goods-name {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						line-height: 40rpx;
					}

					.goods-spec {
						.text {
							padding: 0 10rpx;
							border-radius: 10rpx;
							background-color: #f3f3f3;
							color: #a7a7a7;
						}
					}


				}

				.price-number-box {
					display: flex;
					line-height: 46rpx;
					justify-content: space-between;



				}

				.number-box {
					position: absolute;
					right: 10rpx;
					bottom: 10rpx;

					.number-sub,
					.number-num,
					.number-add {
						line-height: 50rpx;
						display: inline-block;
						min-width: 50rpx;
						text-align: center;
						border: 2rpx solid #ccc;
					}

					.number-sub {}

					.number-num {
						min-width: 60rpx;
						border-left-style: none;
						border-right-style: none;
					}

					.number-add {}
				}




			}
		}
	}
    
    
    .refundButton {
    	color: #FFFFFF;
    	padding: 0 38rpx;
    	margin: 0;
    	border-radius: 100px;
    	height: 66rpx;
    	line-height: 66rpx;
    	background: #ff3300;
    	box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72)
    }
    
    .right-box {
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    
    	.total-cost {
    		padding: 0 10rpx;
    	}
    
    	.account {
    		color: #FFFFFF;
    		padding: 0 38rpx;
    		margin: 0;
    		border-radius: 100px;
    		height: 66rpx;
    		line-height: 66rpx;
    		background: #ff3300;
    		box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72)
    	}
    }

	.footer {
		/*#ifdef H5 */
		margin-bottom: 100rpx;
		/* #endif */
		border-radius: 16rpx;
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 20rpx;
		height: 100rpx;
		z-index: 95;
		box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .5);
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.check-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.goods-remove {
				border: solid 2rpx #f06c7a;
				color: #f06c7a;
				padding: 0 30rpx;
				height: 50rpx;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}


		.right-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.total-cost {
				padding: 0 10rpx;
			}

			.account {
				color: #FFFFFF;
				padding: 0 38rpx;
				margin: 0;
				border-radius: 100px;
				height: 66rpx;
				line-height: 66rpx;
				background: #ff3300;
				box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72)
			}
		}
	}
</style>
